<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-sm border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center space-x-8">
          <span class="text-xl font-bold text-gray-900">Portfolio</span>
          <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">About</a>
            <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Skills</a>
            <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Projects</a>
            <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Contact</a>
          </div>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
          Download CV
        </button>
      </div>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 左侧个人信息 -->
      <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl shadow-lg p-8">
          <div class="text-center">
            <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-linear-to-r from-blue-400 to-indigo-600 flex items-center justify-center">
              <span class="text-white text-4xl font-bold">JD</span>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 mb-2">John Doe</h1>
            <p class="text-gray-600 mb-4">Full Stack Developer</p>
            <div class="flex justify-center space-x-3 mb-6">
              <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors">
                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
              </a>
              <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors">
                <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                </svg>
              </a>
            </div>
          </div>
          
          <div class="border-t pt-6 mt-6">
            <h3 class="font-semibold text-gray-900 mb-3">Contact Info</h3>
            <div class="space-y-2 text-sm">
              <div class="flex items-center text-gray-600">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                john.doe@email.com
              </div>
              <div class="flex items-center text-gray-600">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
                +1 234 567 8900
              </div>
              <div class="flex items-center text-gray-600">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                San Francisco, CA
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧详细信息 -->
      <div class="lg:col-span-2 space-y-8">
        <!-- 关于我 -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-4">About Me</h2>
          <p class="text-gray-600 leading-relaxed">
            Passionate full-stack developer with 5+ years of experience building scalable web applications. 
            I specialize in React, Node.js, and cloud technologies. I love turning complex problems into 
            simple, beautiful, and intuitive solutions.
          </p>
        </div>

        <!-- 技能 -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">Skills</h2>
          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">JavaScript</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">React</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">Node.js</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">Python</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">AWS</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
              <span class="text-gray-700">MongoDB</span>
            </div>
          </div>
        </div>

        <!-- 项目展示 -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">Featured Projects</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <div class="h-32 bg-linear-to-r from-purple-400 to-pink-400 rounded-lg mb-3"></div>
              <h3 class="font-semibold text-gray-900 mb-2">E-Commerce Platform</h3>
              <p class="text-sm text-gray-600 mb-3">Full-stack e-commerce solution with React and Node.js</p>
              <div class="flex space-x-2">
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">React</span>
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Node.js</span>
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">MongoDB</span>
              </div>
            </div>
            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <div class="h-32 bg-linear-to-r from-blue-400 to-cyan-400 rounded-lg mb-3"></div>
              <h3 class="font-semibold text-gray-900 mb-2">Task Management App</h3>
              <p class="text-sm text-gray-600 mb-3">Collaborative task management tool with real-time updates</p>
              <div class="flex space-x-2">
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Vue.js</span>
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Firebase</span>
                <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Tailwind</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
